<!--
 * @Descripttion: 说明
 * @version: V1.0
 * @Author: aqiang
 * @Date: 2024-03-05 01:52:31
 * @LastEditTime: 2024-09-20 17:22:12
-->

<template>
	<el-card>
		<el-form :inline="true" :model="formData.queryForm" @keyup.enter="getDataList">
			<el-form-item>
				<el-radio-group v-model="formData.queryForm.boxState" fill="#e15353">
					<el-radio-button label="">{{ '箱状态' }}</el-radio-button>
					<el-radio-button label="1">未装箱</el-radio-button>
					<el-radio-button label="2">已装箱</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-radio-group v-model="formData.queryForm.orderState" fill="#e15353">
					<el-radio-button value="" label="">出仓状态</el-radio-button>
					<el-radio-button label="1">未出仓</el-radio-button>
					<el-radio-button label="2">已出仓</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-radio-group v-model="formData.queryForm.businessState">
					<el-radio-button value="" label="">业务类型</el-radio-button>
					<el-radio-button label="1">空运</el-radio-button>
					<el-radio-button label="2">海运</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-radio-group v-model="formData.queryForm.boxNum">
					<el-radio-button value="" label="">箱类型</el-radio-button>
					<el-radio-button label="1">整箱</el-radio-button>
					<el-radio-button label="2">合箱</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-radio-group v-model="formData.queryForm.box_status">
					<el-radio-button value="" label="">海外入仓状态</el-radio-button>
					<el-radio-button label="1">未入库</el-radio-button>
					<el-radio-button label="2">已入库</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<div>
				<el-form-item>
					<el-input v-model="formData.queryForm.orderNo" placeholder="订单号" clearable></el-input>
				</el-form-item>
				<!-- 收据单号 -->
				<el-form-item>
					<el-input v-model="formData.queryForm.collectNo" placeholder="请输入收据单号" clearable type="textarea"
						:rows="1"></el-input>
				</el-form-item>
				<!-- 箱号 -->
				<el-form-item>
					<el-input v-model="formData.queryForm.boxNo" placeholder="箱号" clearable></el-input>
				</el-form-item>

				<el-form-item>
					<el-input v-model="formData.queryForm.collectSmallNo" placeholder="货编号" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="formData.queryForm.expressNo" placeholder="快递单号" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="formData.queryForm.goodsName" placeholder="货名" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="formData.queryForm.sendor" placeholder="发货人/收货人" clearable></el-input>
				</el-form-item>
			</div>
			<el-form-item>
				<el-select v-model="formData.queryForm.chargeState" remote filterable clearable placeholder="计费重类型">
					<el-option v-for="item in packOptions" :key="item.value" :label="item.lable" :value="item.value" />
				</el-select>
			</el-form-item>
			<!-- <el-form-item>
				<el-input v-model="queryForm.orderid" placeholder="客户" clearable></el-input>
			</el-form-item> -->
			<el-form-item>
				<!-- <el-input
          v-model="queryForm.customId"
          placeholder="客户"
          clearable
        ></el-input> -->
				<el-select v-model="formData.queryForm.customId" remote filterable clearable placeholder="客户">
					<el-option v-for="item in customList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="formData.queryForm.originId" remote filterable clearable placeholder="当前档口"
					@change="findAddress1">
					<el-option v-for="item in addressOptions1" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="formData.queryForm.hourseOrigin" remote filterable clearable placeholder="始发地仓">
					<el-option v-for="item in addressOptions2" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="formData.queryForm.destId" remote filterable clearable placeholder="目的港"
					@change="findHoures">
					<el-option v-for="item in HourseOptions1" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="formData.queryForm.hourseDest" remote filterable clearable placeholder="目的仓">
					<el-option v-for="item in HourseOptions2" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-input v-model="formData.queryForm.reamrk" placeholder="备注" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-date-picker v-model="formData.queryForm.pickupDate" type="datetimerange" start-placeholder="收货开始日期"
					end-placeholder="收货开始日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
					time-format="A hh:mm:ss" />
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="addPackHandle()">新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="OutWareHouseHandle">出仓</el-button>
			</el-form-item>
			<div></div>
		</el-form>
		<el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%" @select-all="handleSelectAll"
			@select="handleSelect">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="dictType" label="序号" header-align="center" align="center">
				<template #default="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="boxNo" label="箱号" header-align="center" align="center"> </el-table-column>
			<!-- <el-table-column prop="boxState" label="箱状态" header-align="center" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.boxState && scope.row.boxState == 1" size="large" type="success">未装箱</el-tag>
					<el-tag v-if="scope.row.boxState && scope.row.boxState == 2" size="large" type="success">已装箱</el-tag>
				</template>
			</el-table-column> -->
			<el-table-column prop="hourseState" label="出仓状态" header-align="center" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.hourseState && scope.row.hourseState == 1" size="large"
						type="success">未出仓</el-tag>
					<el-tag v-if="scope.row.hourseState && scope.row.hourseState == 2" size="large"
						type="success">已出仓</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="destinationCountry" label="目的地国家" header-align="center" align="center"></el-table-column>
			<el-table-column prop="boxNum" label="箱数" header-align="center" align="center"></el-table-column>
			<el-table-column prop="expressWeight" label="货重" header-align="center" align="center"></el-table-column>
			<el-table-column prop="chargeWeight" label="计费重" header-align="center" align="center"></el-table-column>
			<el-table-column label="尺寸">
				<el-table-column prop="boxLength" label="长(cm)" header-align="center" align="center"></el-table-column>
				<el-table-column prop="boxWidth" label="宽(cm)" header-align="center" align="center"></el-table-column>
				<el-table-column prop="boxHeight" label="高(cm)" header-align="center" align="center"></el-table-column>
			</el-table-column>
			<el-table-column prop="tiji" label="体积(kg)" header-align="center" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" header-align="center" sortable
				align="center"></el-table-column>
			<el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="170">
				<template #default="{ row }">
					<!-- <el-button type="primary" link>删除</el-button> -->
					<el-button type="primary" link @click="addOrUpdateHandle(row)">编辑</el-button>

					<el-dropdown :hide-on-click="false" class="drop-down">
						<span class="el-dropdown-link">
							更多
							<el-icon class="el-icon--right">
								<ArrowDown />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>
									<el-button type="primary" link>打印箱标签</el-button>
								</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination :current-page="formData.currentPage" :page-sizes="pageSizes" :page-size="formData.pageSize"
			:total="formData.total" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle"
			@current-change="currentChangeHandle">
		</el-pagination>
		<!-- <add-pack ref="addPackRefs" /> -->
		<!-- 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRefs" :isUpdate="isUpdate.valueOf()" @close="handleCloseFreight"></add-or-update>
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { packageApi, packOutWareHouseApi } from '@/api/pack'
import { ElMessage } from 'element-plus'
import { getSelectData } from '@/api/customer'
import { getExpressRelatedDataApi } from '@/api/hourse'
import addOrUpdate from './addOrUpdate.vue'
import { fetchWarning, myError } from '@/store/modules/common'
// import DictData from './data.vue'
import addPack from './addPack.vue'
import { IHooksOptions } from '@/hooks/interface'
import store from '@/store'
import { getDataDictionary } from '@/api/dict'
import { ArrowDown } from '@element-plus/icons-vue'
const pageSizes = [1, 10, 20, 50, 100, 200]
const dataListLoading = ref(false)
const dataList = ref([])
const dataListSelections = []

const isUpdate = ref<Boolean>(false);

const customList = ref([])
const formData = reactive({
	queryForm: {
		boxNum: 0,
		box_status: 'all',
		normal_piece: 'all',
		pack_status: 'all',
		business_type: 'all',
		sell_status: 'all',
		cargo: 'get',
		order: '',
		id: 0,
		orderid: ''
	},
	currentPage: 1,
	pageSize: 10,
	total: 0
})

const getDictionary = async params => {
	try {
		const res = await getDataDictionary(params)

		if (fetchWarning(res)) {
			return
		}
		let data = res.data || []
		// console.log('字典数据', data)
		data.forEach(item => {
			switch (item.dictType) {
				case 'NC':
					NCOptions.value.push({ label: item.dictLabel, value: +item.id })
					break
				case 'payment':
					paysOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'businessOptions':
					businessOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'arrivalOptions':
					arrivalOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'chargedOptions':
					chargedOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'collectTypeOptions':
					collectTypeOptions.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'cargoOptions':
					cargoOptions.value.push({ label: item.dictLabel, value: +item.dictValue })
					break
				case 'startAddressOptionsFirst':
					startAddressOptionsFirst.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'startAddressOptionsSecond':
					startAddressOptionsSecond.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'startAddressOptionsThird':
					startAddressOptionsThird.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'destinationOptionsFirst':
					destinationOptionsFirst.value.push({ label: item.dictLabel, value: item.id })
					break
				case 'destinationOptionsSecond':
					destinationOptionsSecond.value.push({ label: item.dictLabel, value: item.id })
					break
				default:
					console.warn('未知字典类型:', item.dictType)
			}
		})
	} catch (error) {
		console.error('获取字典失败', error)
	}
}

const NCOptions = ref([])
getDictionary({
	dictType: 'NC'
})
const pieceOptions = [
	{
		lable: '全部',
		value: 'all'
	},
	{
		lable: '正常件',
		value: 'normal'
	},
	{
		lable: '问题件',
		value: 'err'
	}
]
const packOptions = [
	{
		lable: '计费重类型',
		value: ''
	},
	{
		lable: '未打包',
		value: '1'
	},
	{
		lable: '部分打包',
		value: '2'
	},
	{
		lable: '已打包',
		value: '3'
	}
]
const businessOptions = [
	{
		lable: '全部业务类型',
		value: 'all'
	},
	{
		lable: '空运',
		value: 'sky'
	},
	{
		lable: '海运',
		value: 'sea'
	}
]
const sellOptions = [
	{
		lable: '全部出货状态',
		value: 'all'
	},
	{
		lable: '未出货',
		value: 'nosell'
	},
	{
		lable: '已出货',
		value: 'shipped'
	}
]
const cargoOptions = [
	{
		lable: '已收货',
		value: 'get'
	},
	{
		lable: '已装箱',
		value: 'boxed'
	},
	{
		lable: '档口出货仓',
		value: 'exit'
	},
	{
		lable: '海外已入仓',
		value: 'put'
	}
]
const orderOptions = [
	{
		lable: '是',
		value: 'yes'
	},
	{
		lable: '否',
		value: 'no'
	}
]
const sizeChangeHandle = (val: number) => {
	formData.pageSize = val
	getDataList()
}
const currentChangeHandle = (val: number) => {
	formData.currentPage = val
	getDataList()
}

const getDataList = async () => {
	const obj = {
		page: formData.currentPage,
		pageSize: formData.pageSize
	}

	dataListLoading.value = true
	const params = { ...obj, ...formData.queryForm }
	console.log('-----', params)
	try {
		const res = await packageApi(params)
		dataListLoading.value = false
		if (fetchWarning(res)) {
			return
		}
		console.log('返回内容Pack', res)
		dataList.value = res.data.records
		formData.total = res.data.total
	} catch (e) {
		dataListLoading.value = false
		myError(e)
	}
}

getDataList()
const dictDataVisible = ref(false)
const dictDataTitle = ref()
const dictTypeId = ref()
const showDictDataHandle = (row: any) => {
	dictDataVisible.value = true
	dictTypeId.value = row.id
	dictDataTitle.value = '字典配置 - ' + row.dictType
}

//增加和编辑
const addOrUpdateRefs = ref()
const addPackHandle = () => {
	isUpdate.value = false;
	addOrUpdateRefs.value.init()
}
const addOrUpdateHandle = async (val: object) => {
	isUpdate.value = true;
	console.log('val', addOrUpdateRefs.value, val)
	addOrUpdateRefs.value.init({ ...val })
	getDataList()
}
async function getCustoms() {
	let res = await getSelectData()

	if (fetchWarning(res)) {
		return
	}
	let data = res.data || []
	customList.value = res.data
}
getCustoms()

//选择
const selectedPackageIds = ref<number[]>([])
const handleSelect = (selection: any, row) => {
	if (selection) {
		selectedPackageIds.value.push(row.id)
	} else {
		const index = selectedPackageIds.value.indexOf(row.id)
		if (index > -1) {
			selectedPackageIds.value.splice(index, 1)
		}
	}
}
//全选
const handleSelectAll = val => {
	selectedPackageIds.value = val ? val.map(item => item.id) : []
}
//出仓
const outWareHouse = ref()
const OutWareHouseHandle = async () => {
	if (selectedPackageIds.value.length === 0) {
		console.warn('No packages selected')
		return
	}

	const res = await packOutWareHouseApi(selectedPackageIds.value)
	if (res.code === 0) {
		ElMessage({
			message: '出仓成功',
			type: 'success'
		})
	} else {
		ElMessage.error('出仓失败')
	}

	console.log('res', res)
	// 清空选中的包裹ID
	selectedPackageIds.value = []
}
</script>
